import { Ball } from "./ball";
import { ThingSizeModel } from './base/model';
import { Tool } from './base/tool';
import { Map } from './map';
import { Racket } from "./racket";

const speed = 5;
export class Init {
    private canvasW: number = -1;
    private canvasH: number = -1;
    private game: Phaser.Game;

    // 地图
    private map: Map;
    // // 所有球集合
    // private allBalls: Ball[] = [];
    // // 挡板
    // private racket: Racket;

    // private fn = (delta: any) => this.compute(delta);;

    // @ts-ignore
    curScene: Phaser.Scene;
    // @ts-ignore
    ball: Phaser.Types.Physics.Arcade.ImageWithDynamicBody;

    constructor(private dom: HTMLDivElement) {
        this.canvasW = this.dom.clientWidth;
        this.canvasH = this.dom.clientHeight;

        this.game = new Phaser.Game({
            type: Phaser.AUTO,
            width: this.canvasW,
            height: this.canvasH,
            physics: {
                default: 'arcade',
                // arcade: {
                //     gravity: { y: 200 }
                // }
            },
            scene: {
                preload: this.preload.bind(this),
                create: this.create.bind(this),
                update: this.update.bind(this)
            }
        });

        this.map = new Map(this.game);

        //     // 初始的一个小球
        //     let ball = new Ball(this.app);
        //     this.allBalls = [ball];

        //     this.racket = new Racket(this.app);

        //     this.dom.appendChild(this.app.view);//

        //     this.app.ticker.add(this.fn);
        // }
    }

    preload() {
        this.curScene = this.game.scene.getAt(0)!;
        this.curScene.load.setBaseURL('/');
        // this.curScene.load.image('sky', Tool.getAbsolutePath('assets/space3.png'));
        // this.curScene.load.image('logo', Tool.getAbsolutePath('assets/phaser3-logo.png'));
        this.curScene.load.image('ball', Tool.getAbsolutePath('assets/ball.png'));
        this.curScene.load.image('red', Tool.getAbsolutePath('assets/red.png'));
        // this.curScene.load.image('platform', Tool.getAbsolutePath('assets/platform.png'));
        this.curScene.load.image('wall', Tool.getAbsolutePath('assets/wall.png'));
        this.curScene.load.image('block', Tool.getAbsolutePath('assets/block.jpg'));

        this.curScene.load.spritesheet('dude',
            Tool.getAbsolutePath('assets/dude.png'),
            { frameWidth: 32, frameHeight: 48 }
        );
    }

    create() {
        this.curScene.add.image(400, 300, 'sky');

        let particles = this.curScene.add.particles('red');

        let emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        let ball = this.curScene.physics.add.image(this.canvasW / 2, this.canvasH - 30, 'ball');
        ball.setVelocity(-1000, 1000);
        ball.setBounce(1, 1);
        ball.setCollideWorldBounds(true);
        this.ball = ball;

        emitter.startFollow(ball);

        this.map.createMap();
        this.initDude();
    }

    initDude() {
        this.curScene.physics.add.collider(this.ball, this.map.walls);

        // @ts-ignore
        let leftText = this.curScene.add.text(this.canvasW - 200, 16, 'left: --', { fontSize: '32px', fill: 'green' });

        this.curScene.physics.add.collider(this.map.blocks, this.ball, (block, ball) => {
            // @ts-ignore
            ball.disableBody(true, true);

            score += 10;
            scoreText.setText('Score: ' + score);
            leftText.setText('left: ' + this.map.blocks.countActive(true));
        });

        this.curScene.anims.create({
            key: 'left',
            frames: this.curScene.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
            frameRate: 10,
            repeat: -1
        });

        this.curScene.anims.create({
            key: 'turn',
            frames: [{ key: 'dude', frame: 4 }],
            frameRate: 20
        });

        this.curScene.anims.create({
            key: 'right',
            frames: this.curScene.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });

        let score = 0;
        // @ts-ignore
        let scoreText = this.curScene.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: 'green' });
    }

    update() {
        let cursors = this.curScene.input.keyboard.createCursorKeys();

        if (cursors.left.isDown) {

        }
        else if (cursors.right.isDown) {

        }
        else {

        }

        if (cursors.up.isDown) {
        }
    }
}